<template>
  <div id="tmpl"> 
    <div id="cate">
     <ul v-bind="{style:'width:'+ulWidth+'px'}">
         <li @click="getiimgs()">全部</li>
         <li v-for="item in cates" @click="getiimgs(item.id)">{{item.title}}</li>
     </ul>
    </div>
    <div id="imglist">
        <ul>
            <li v-for="item in list">
                <router-link v-bind='{to:"/photo/photoinfo/"+item.id}'>
                    <img v-lazy="item.img_url">
                </router-link>
                <div id="desc">
                    <h5 v-text="item.title"></h5>
                    <p v-text="item.zhaiyao"></p>
                </div>
            </li>
        </ul>
     </div>
  </div>
</template>

<script>
import common from '../kits/common.js';
import {Toast} from 'mint-ui';
export default {
    data(){
        return{
            ulWidth:480,
            cates:[],
            list:[]

        }
    },
    created(){
        var cateid = 0;
        this.getimgs();
        this.getiimgs(cateid);
    },
  methods:{
      getimgs(){
          this.$http.get(common.apidomain+'/api/getimgcategory').then(function(res){
              if(res.body.status != 0){
                  Toast(res.body.message);
                  return;
              }
              this.cates = res.body.message
              var v = 66;
              var count =res.body.message.length+1;
              this.ulWidth =v*count ;

          })
      },
      getiimgs(cateid){
          cateid = cateid || 0;
          this.$http.get(common.apidomain+'/api/getimages/'+cateid).then(function(res){
              if(res.body.status != 0){
                  Toast(res.body.message);
                  return;
              }
              this.list = res.body.message
              

          })
      }
  }
}
</script>

<style scoped>
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
#cate{
    width: 480px;
    max-width: 480px;
    overflow-x: auto;

}
#cate ul{
    margin: 0;
    padding-left:6px; 
}
#cate li{
    list-style: none;
    display: inline-block;
    color:#0094ff;
    font-size: 14px;
    padding: 5px;
    padding-bottom: 15px;
    cursor: pointer;
}
#imglist ul{
    padding: 0px;
    margin: 0;

}
#imglist li{
    list-style: none;
    position: relative;
}

#imglist img{
    width: 100%;
    height: 300px;
}
#desc{
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
}
#desc h5{
    color: #ffffff;
    font-weight: bold;
}
#desc p{
    color: #ffffff;
}
</style>
